@use './variables' as *;
@import 'element-plus/theme-chalk/dark/css-vars.css';

html.dark > body,
html.dark > body[class*='vab-theme-'] {
  --el-color-black: #cfd3dc;
  --el-color-white: #1d1e1f;
  --el-color-grey: #cfd3dc;
  --el-menu-background-color-second: #1d1e1f;
  --el-border-color: #414243;
  --el-menu-background-color: #1d1e1f;
  --el-mask-color: rgba(0, 0, 0, 0.6);

  --w-e-textarea-bg-color: #333;
  --w-e-textarea-color: #fff;
  --w-e-textarea-border-color: var(--el-border-color);
  --w-e-textarea-slight-border-color: var(--el-border-color);
  --w-e-textarea-slight-color: var(--el-border-color);
  --w-e-textarea-slight-bg-color: var(--el-border-color);
  --w-e-textarea-selected-border-color: var(--el-color-primary);
  --w-e-textarea-handler-bg-color: var(--el-color-primary);
  --w-e-toolbar-color: #fff;
  --w-e-toolbar-bg-color: #333;
  --w-e-toolbar-active-color: #fff;
  --w-e-toolbar-active-bg-color: #333;
  --w-e-toolbar-disabled-color: #999;
  --w-e-toolbar-border-color: #333;
  --w-e-modal-button-bg-color: #333;
  --w-e-modal-button-border-color: #d9d9d9;

  color: #cfd3dc !important;
  background-color: var(--el-color-white) !important;

  .vab-nav {
    background: var(--el-color-white) !important;
  }

  [class*='-container'],
  .no-background-container {
    background: var(--el-color-white) !important;
  }

  .table {
    td {
      border: 1px solid var(--el-border-color) !important;
    }
  }

  .vab-column-bar .el-tabs .el-tabs__item {
    color: var(--el-color-black) !important;
  }

  .vab-column-bar {
    border-right: 1px solid var(--el-border-color) !important;

    &-arrow {
      .el-tabs {
        .el-tabs__item {
          &.is-active {
            color: var(--el-menu-color-text) !important;
            background: transparent !important;

            .vab-column-grid {
              background: transparent !important;

              &:after {
                border-color: transparent var(--el-menu-color-text) transparent transparent;
              }
            }
          }
        }
      }
    }
  }

  .vab-tabs-content-card .el-tabs__header .el-tabs__item {
    border: 1px solid var(--el-border-color) !important;
  }

  .vab-column-bar .el-tabs .el-tabs__nav {
    margin-left: -1px !important;
    background: var(--el-color-white) !important;
    border-right: 1px solid var(--el-border-color) !important;
  }

  .vab-logo-column .logo {
    background: var(--el-color-white) !important;
    border-right: 1px solid var(--el-border-color) !important;
  }

  .vab-side-bar {
    border-right: 1px solid var(--el-border-color) !important;
  }

  .vab-header {
    border-bottom: 1px solid var(--el-border-color) !important;

    .vab-logo-horizontal {
      height: calc(var(--el-header-height) - 2px);
    }

    .vab-main .right-panel {
      [class*='ri-'],
      .username {
        color: var(--el-color-black) !important;
      }
    }
  }

  /* svg */
  [fill='#fff'] {
    fill: var(--el-color-white) !important;
  }
}
